// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require("gulp");

const loadplugins = require("gulp-load-plugins");

const plugins = loadplugins(); //集合所有 gulp 插件

const del = require("del"); //删除文件 npm

// 热加载
const browserSync = require("browser-sync");
//  创建一个本地服务器
const bs = browserSync.create();

const clean = () => {
  // temp 临时目录
  // 流程 src => temp(临时文件) => dist(最终文件)
  return del(["dist", "temp"]);
};
// 样式
const style = () => {
  //  src目标位置 base 拷贝文件夹  src =>/assets/styles/*.scss
  return (
    src("src/**/*.scss", { base: "src" })
      // 一般插件都是提供一个方法
      // 以_xxx.scss 会认为是主文件私有的css，会打在一个css上
      // outputStyle 格式化css
      .pipe(plugins.sass({ outputStyle: "expanded" }))
      // 放到哪里去  一般放到dist
      .pipe(dest("temp"))
      // 推流
      .pipe(bs.reload({ stream: true }))
  );
};

// js
const script = () => {
  return (
    src("src/**/*.js", { base: "src" })
      //es6 转 es5
      .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
      .pipe(dest("temp"))
      .pipe(bs.reload({ stream: true }))
  );
};
// 图片
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
// 字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};

// 模板引擎
// swig  可以传递data
const html = () => {
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ cache: false }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

//  额外任务
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

//  热服务器
const serve = () => {
  // 监听
  watch("src/**/*.scss", style);
  watch("src/**/*.js", script);
  watch("src/*.html", html);
  // 一些静态的处理
  watch(
    ["public/**", "src/assets/images/**", "src/assets/fonts/**"],
    bs.reload
  );

  bs.init({
    notify: false,
    server: {
      // 加工之后的文件夹
      // 引用文件时 dist 找不到就去 src src找不到就去public
      baseDir: ["temp", "src", "public"],
      // 有些资源是从node_modules后去的 这个的优先级大于 baseDir
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useRef = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      // 压缩
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      // collapseWhitespace  空格
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
          })
        )
      )
      .pipe(dest("dist"))
  );
};
// 转换 css html script
const compile = parallel(style, html, script);

// series  同步任务
// parallel 异步任务 同时执行
const build = series(
  clean,
  parallel(series(compile, useRef), font, image, extra)
);

const start = series(compile, serve);

module.exports = {
  clean,
  build,
  start,
  serve
};